/**
*  created by zhongrui at 2016.3.10
*/
(function ($) {
    $.fn.stepChoose = function (options) {

        var default_config = {
            selectData: [],
            title: "请选择学校",
            dataurl: "/Common/GetUniversities",
            paramName: "provinceId",
            valueInputId:""
        };

        var id = $(this).attr("id");
        var popId = id + "_pop";
        var idSeletor = "#" + $(this).attr("id");
        var popIdSeletor = "#" + id + "_pop";


        var options = $.extend(default_config, options);

        var basicHtml = '<div id="' + popId + '" class="provinceSchool">\
                    <div class="title"><span>' + options.title + '</span></div>\
                    <div class="proSelect">\
                        <select></select>\
                    </div>\
                    <div class="schoolList">\
                        <ul></ul>\
                    </div>\
                    <div class="button">\
                        <a href="javascript:;" flag="0">取消</a>\
                    </div>\
                </div>';

        $(basicHtml).hide().insertAfter($(idSeletor));//插入基本文档结构

        //点击事件，展开
        $(idSeletor).click(function () {
            var top = $(this).position().top + $(this).height() + 2;
            var left = $(this).position().left;
            $(popIdSeletor).css({ top: top, left: left });
            $(popIdSeletor).show();
        });

        //rander上方选择框的选项
        var selectStr = "";
        for (var i = 0, len = options.selectData.length; i < len; i++) {
            var text = options.selectData[i].Text;
            var value = options.selectData[i].Value;
            selectStr = selectStr + "<option Value='" + value + "'>" + text + "</option>"
        }
        $(popIdSeletor + " div[class='proSelect'] select").html(selectStr);

        //输出列表,返回的json是[{Text:"xxx",Value:"xxx"},...]
        function renderPopList(data) { 
            var renderResult = "";
            var schoolListArray = data;
            var name = "";
            for (var i = 0, len = schoolListArray.length; i < len; i++) {
                name = schoolListArray[i].Text;
                value = schoolListArray[i].Value;
                if (name.length > 13) {
                    renderResult = renderResult + "<li val=" + value + " class='DoubleWidthLi' title=" + name + ">" + name + "</li>"
                } else {
                    renderResult = renderResult + "<li val=" + value + " >" + name + "</li>"
                }
            }
            return renderResult;
        }

        //select切换事件
        $(popIdSeletor + " div[class='proSelect'] select").change(function () {
            var postData = {};
            postData[options.paramName] =  $(this).val();
            $.post(options.dataurl, postData, function (data) {
                $(popIdSeletor + " div[class='schoolList'] ul").html(renderPopList(data));
            });
        });
        $(popIdSeletor + " div[class='proSelect'] select").trigger("change");//初始化列表

        //学校列表mouseover事件
        $(popIdSeletor).on("mouseover", "div[class='schoolList'] ul li", function () {
            $(this).css("background-color", "#72B9D7");
        });

        //学校列表mouseout事件
        $(popIdSeletor).on("mouseout", "div[class='schoolList'] ul li", function () {
            $(this).css("background-color", "");
        });

        //学校列表点击事件
        $(popIdSeletor).on("click", "div[class='schoolList'] ul li", function () {
            $(idSeletor).val($(this).html()).change();
            if (options.valueInputId && $("#" + options.valueInputId).length) {
                $("#" + options.valueInputId).val($(this).attr("val")).change();//接收实际的value的input
            }
            $(popIdSeletor).hide();
        });

        $(popIdSeletor + " .button").click(function () {
            $(popIdSeletor).hide();
        });

        //点击其他地方关闭
        $(document).on("click", "", function (e) {
            var $target = $(e.target);
            if ($target.attr("id") != popId
                && $target.attr("id") != id
                && !$target.parents(popIdSeletor).length
                && !$target.parents(idSeletor).length) {
                $(popIdSeletor).hide();
            }
        });
    }
})(jQuery);
